'use client';

import type { TMetadata } from '@/types';
import LoadPage from '@/app/[locale]/load/load';
import ErrorPage from '@/app/[locale]/error/error';
import useUser from '@/hooks/useUser';
import { logout } from '@/services/api';
import { useMutation } from '@tanstack/react-query';
import FooterH5IcpPage from '@/app/[locale]/mobile/footerH5Icp';
import FooterH5Page from '@/app/[locale]/mobile/footerH5';
import { UserIdH5PageContext } from '@/contexts/mobile/userId';
import BtnUserIdH5Page from '@/app/[locale]/mobile/users/home/btn';
import BtnBoxUserIdH5Page from '@/app/[locale]/mobile/users/home/btnBox';
import PostUserIdH5Page from '@/app/[locale]/mobile/users/home/post';
import useToast from 'hooks/useToast';
import StatisticsUserIdH5Page from '@/app/[locale]/mobile/users/home/statistics';
import FavouritesUserIdH5Page from '@/app/[locale]/mobile/users/home/favourites';
import AboutMeUserIdH5Page from '@/app/[locale]/mobile/users/home/aboutMe';
import ContactUserIdH5Page from '@/app/[locale]/mobile/users/home/contact';
import NameUserIdH5Page from '@/app/[locale]/mobile/users/home/name';
import UpdatePasswordUserIdPage from '@/app/[locale]/users/[id]/password';
import UpdateBasicInfoUserIdPage from '@/app/[locale]/users/[id]/basicInfo';
import ColorUserIdH5Page from '@/app/[locale]/mobile/users/home/color';

export default function HomeUserIdH5Page({
  metadata,
}: {
  metadata: TMetadata;
}) {
  return (
    <>
      <UserId metadata={metadata} />
      <FooterH5IcpPage metadata={metadata} />
      <FooterH5Page metadata={metadata} />
    </>
  );
}

const UserId = ({ metadata }: { metadata: TMetadata }) => {
  const userQuery = useUser(metadata);
  const { show } = useToast();

  const logoutMutation = useMutation(async () => {
    await logout();
  });

  async function onClickLogout() {
    try {
      await logoutMutation.mutateAsync();

      show({
        type: 'SUCCESS',
        message: '退出登录完成',
      });

      setTimeout(() => {
        show({
          type: 'INFO',
          message: '即将重新加载',
        });
      }, 1000);

      setTimeout(() => {
        location.reload();
      }, 1500);
    } catch (e) {
      logoutMutation.reset();
      show({
        type: 'DANGER',
        message: e,
      });
    }
  }

  function emptyPrompt(prompt: string = '没有内容') {
    show({
      message: prompt,
    });
  }

  if (userQuery.data) {
    return (
      <UserIdH5PageContext.Provider value={{ metadata }}>
        <div className="col p-2">
          <div className="card rounded-5 border-0">
            <div className="card-body">
              <div className="vstack gap-3">
                <NameUserIdH5Page user={userQuery.data.user} />

                <div></div>

                {userQuery.data.user && (
                  <BtnBoxUserIdH5Page>
                    <BtnUserIdH5Page
                      path="/posts/new"
                      iName="plus-lg"
                      name="创建帖子"
                    />
                  </BtnBoxUserIdH5Page>
                )}

                <BtnBoxUserIdH5Page>
                  {userQuery.data.user ? (
                    <>
                      <BtnUserIdH5Page
                        path="/avatar"
                        iName="person-bounding-box"
                        name="修改头像"
                      />
                      <BtnUserIdH5Page
                        metadata={metadata}
                        iName="pencil-square"
                        name="修改资料"
                        content={
                          <UpdateBasicInfoUserIdPage
                            items={userQuery.data.user.details.contacts}
                          />
                        }
                      />
                      <BtnUserIdH5Page
                        metadata={metadata}
                        iName="pencil-square"
                        name="修改密码"
                        content={<UpdatePasswordUserIdPage />}
                      />
                    </>
                  ) : (
                    <>
                      <BtnUserIdH5Page
                        path="/login"
                        iName="person"
                        name="快捷登录"
                      />
                      <BtnUserIdH5Page
                        path="/register"
                        iName="person-add"
                        name="快速注册"
                      />
                    </>
                  )}
                </BtnBoxUserIdH5Page>

                <BtnBoxUserIdH5Page>
                  {userQuery.data.user ? (
                    <BtnUserIdH5Page
                      metadata={metadata}
                      content={<PostUserIdH5Page id={userQuery.data.user.id} />}
                      name="相关帖子"
                    />
                  ) : (
                    <BtnUserIdH5Page
                      fn={emptyPrompt.bind(this, '暂时没有相关帖子')}
                      name="相关帖子"
                    />
                  )}

                  {userQuery.data.user && (
                    <BtnUserIdH5Page
                      metadata={metadata}
                      iName="stars"
                      name="我的收藏"
                      content={
                        <FavouritesUserIdH5Page id={userQuery.data.user.id} />
                      }
                    />
                  )}

                  {userQuery.data.user ? (
                    <BtnUserIdH5Page
                      metadata={metadata}
                      content={
                        <PostUserIdH5Page
                          id={userQuery.data.user.id}
                          type="section"
                        />
                      }
                      name="相关内容"
                    />
                  ) : (
                    <BtnUserIdH5Page
                      fn={emptyPrompt.bind(this, '暂时没有相关内容')}
                      name="相关内容"
                    />
                  )}

                  {userQuery.data.user ? (
                    <BtnUserIdH5Page
                      metadata={metadata}
                      content={
                        <PostUserIdH5Page
                          id={userQuery.data.user.id}
                          type="tag"
                        />
                      }
                      name="相关标签"
                    />
                  ) : (
                    <BtnUserIdH5Page
                      fn={emptyPrompt.bind(this, '暂时没有相关标签')}
                      name="相关标签"
                    />
                  )}

                  {userQuery.data.user ? (
                    <BtnUserIdH5Page
                      metadata={metadata}
                      name="相关统计"
                      content={
                        <StatisticsUserIdH5Page user={userQuery.data.user} />
                      }
                    />
                  ) : (
                    <BtnUserIdH5Page
                      fn={emptyPrompt.bind(this, '暂时没有相关统计')}
                      name="相关统计"
                    />
                  )}
                </BtnBoxUserIdH5Page>

                <BtnBoxUserIdH5Page>
                  <BtnUserIdH5Page
                    name="关于我"
                    metadata={metadata}
                    content={
                      <AboutMeUserIdH5Page
                        about={
                          userQuery.data.user
                            ? userQuery.data.user.details.about
                            : undefined
                        }
                      />
                    }
                  />
                  <BtnUserIdH5Page
                    metadata={metadata}
                    iName="person-lines-fill"
                    name="联系方式"
                    content={
                      <ContactUserIdH5Page
                        contacts={
                          userQuery.data.user
                            ? userQuery.data.user.details.contacts
                            : undefined
                        }
                      />
                    }
                  />
                  <BtnUserIdH5Page path="/terms" name="服务条款" />
                  <BtnUserIdH5Page path="/privacy-policy" name="隐私政策" />
                </BtnBoxUserIdH5Page>

                <BtnBoxUserIdH5Page>
                  <ColorUserIdH5Page />
                </BtnBoxUserIdH5Page>

                {userQuery.data.user && (
                  <BtnBoxUserIdH5Page>
                    <BtnUserIdH5Page
                      isLoading={logoutMutation.isLoading}
                      fn={onClickLogout}
                      iName="arrow-bar-right"
                      name="退出登录"
                    />
                  </BtnBoxUserIdH5Page>
                )}

                <div></div>
              </div>
            </div>
          </div>
        </div>
      </UserIdH5PageContext.Provider>
    );
  }

  if (userQuery.error) {
    return <ErrorPage error={userQuery.error} />;
  }

  return <LoadPage />;
};
